<template>
	<view class="page-wrap">
		<uni-table class="details-table" stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="left" width="144rpx">
					<view class="marleft">
						合约名称
					</view>
				</uni-th>
				<uni-th align="center" width="50rpx">方向</uni-th>
				<uni-th align="center" width="50rpx">手数</uni-th>
				<uni-th align="center" width="100rpx">成交价</uni-th>
				<uni-th align="right" width="140rpx">
					<view class="marright">
						逐笔平仓盈亏
					</view>
				</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, i) in tableData" :key="i">
				<uni-td align="left">
					<view class="marleft">
						{{item.name}}
					</view>
				</uni-td>
				<uni-td align="center">{{item.direction}}</uni-td>
				<uni-td align="center">{{item.LOTS}}</uni-td>
				<uni-td align="center">{{item.transaction}}</uni-td>
				<uni-td align="right">
					<view class="marright">
						{{item.profit}}
					</view>
				</uni-td>
			</uni-tr>
		
		</uni-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [
					{
						name: '2023-11-06',
						direction: '',
						LOTS: '1',
						transaction: '',
						profit: '0.00'
					},{
						name: '郑商所',
						direction: '',
						LOTS: '1',
						transaction: '',
						profit: ''
					},{
						name: '纯碱2401',
						direction: '买开',
						LOTS: '',
						transaction: '1845.000',
						profit: '0.00'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
page {
	background-color: #F4F5F7;
}
.details-table {
	border-top: 2rpx solid #F6F7F9;
	box-sizing: border-box;
	background: none;
	& /deep/ .uni-table {
		background: none;
	}
	& /deep/ .uni-table-tr {
		background: none;
	}
	& /deep/ .uni-table-tr:nth-child(1) {
		background-color: #fff;
	}
	& /deep/ .uni-table-tr:nth-child(2n + 3) {
		background-color: rgba(0,0,0,0.06);
	}
	.marleft {
		margin-left: 24rpx;
	}
	.marright {
		margin-right: 24rpx;
	}
	& /deep/ .uni-table-th {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: rgba(0,0,0,0.8);
		padding: 24rpx 0;
	}
	& /deep/ .uni-table-td {
		padding: 0;
		padding: 8rpx 0;
		border-bottom: none;
	}
}
</style>
